<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市选择插件</title>

    <!-- 城市选择插件css样式 -->
    <link rel="stylesheet" th:href="@{/css/admin/city-select.css}">

</head>

<body>

<div class="city-select" id="multi-select"></div>

</body>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/citydata.min.js}"></script>
<script th:src="@{/js/citySelect-1.0.3.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script>

    $(function() {
        // 设置接口
        var MulticitySelect = $('#multi-select').citySelect({

            // 数据接口
            dataJson: cityData,

            // 多选
            multiSelect: true,

            // 多选个数
            multiMaximum: 6,

            // 开启搜索
            search: false,

            // 显示行数
            multiType: 0,

            // 插件初始化后的回调
            onInit: function () {
                console.log(this)
            },

            // 选择城市后的回调
            onCallerAfter: function (target, values) {
                console.log(JSON.stringify(values))
            },

        });

        // 设置多选默认城市接口
        var citys = '成都市';

        MulticitySelect.setCityVal(citys);

        // 获取选中城市的值
        var values = MulticitySelect.getCityVal();

        window.getCityVal = MulticitySelect.getCityVal();

    })
</script>
</html>